<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="partial/layout" lang="zh">
<head>
    <style type="text/css">

    </style>
    <link th:href="@{/editor/css/editormd.css}" rel="stylesheet"/>
    <link th:href="@{/editor/css/editormd.preview.min.css}" rel="stylesheet"/>
    <link th:href="@{/editor/lib/codemirror/codemirror.min.css}" rel="stylesheet"/>
    <link th:href="@{/editor/lib/codemirror/addon/dialog/dialog.css}" rel="stylesheet"/>
    <link th:href="@{/editor/lib/codemirror/addon/search/matchesonscrollbar.css}" rel="stylesheet"/>
</head>
<body>
<div layout:fragment="main">
    <div class="detailcontainer">
        <div class="infosbox">
            <div class="newsview">
                <h3 class="news_title">{{articleItem.title}}</h3>
                <div class="bloginfo">
                    <ul>
                        <li class="author"><a href="/">{{articleItem.author}}</a></li>
                        <li class="lmname"><a href="/">{{articleItem.categoryName}}</a></li>
                        <li class="timer">{{articleItem.publishTime}}</li>
                        <li class="view">{{articleItem.showCount}}</li>
                    </ul>
                </div>
                <div v-if="articleItem.articleTags" class="tags">
                    <a href="javascript:void(0)" target="_blank" v-for="tag in articleTagAliaName"> {{tag}} </a>
                </div>
                <div class="news_about" v-show="articleItem.abstractContent!=''">
                    <strong>简介</strong>{{articleItem.abstractContent}}
                </div>
                <div class="news_con" id="divcontent">
                    <textarea class="news_con">{{articleItem.content}}</textarea>
                </div>
            </div>

        </div>
    </div>
    <div class="sidebardetail" v-show="RelvantArticle.length>0">
        <div class="tuijian">
            <h2 class="hometitle">相关推荐</h2>
            <ul class="tjpic">
                <i><img :src="randomBannerItem.imgSrc"></i>
                <p>{{randomBannerItem.title}}</p>
            </ul>
            <ul class="sidenews">
                <li v-for="item in RelvantArticle">
                    <p>
                        <a :href="['/detail/'+item.id]">{{item.title}}</a>
                    </p> <span>{{item.publishTime}}</span>
                </li>

            </ul>
        </div>
    </div>
</div>
<div layout:fragment="js">
    <script th:src="@{/editor/js/editormd.js}"></script>
    <script th:src="@{/editor/lib/codemirror/codemirror.min.js}"></script>
    <script th:src="@{/editor/lib/marked.min.js}"></script>
    <script th:src="@{/editor/lib/flowchart.min.js}"></script>
    <script th:src="@{/editor/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/editor/lib/prettify.min.js}"></script>
    <script th:src="@{/editor/lib/raphael.min.js}"></script>
    <!-- <script th:src="@{/editor/lib/sequence-diagram.min.js}"></script> -->
    <script th:src="@{/editor/lib/underscore.min.js}"></script>
    <!--	<script th:src="@{/js/changyan.js}" type="text/javascript"></script>-->
    <script th:src="@{/js/blog/articlenavbar.js}" type="text/javascript"></script>
    <script th:inline="javascript" type="text/javascript">

        var app = new Vue({
            el: '#app',
            data: {
                articleItem: {
                    status: '0',
                    title: '', // 文章题目
                    author: '',
                    categoryId: 0,
                    categoryName: '',
                    content: '', // 文章内容
                    abstractContent: '', // 文章摘要
                    coverImageList: [], // 文章图片
                    publishTime: undefined, // 前台展示时间
                    showStyle: 0,
                    id: 0,
                    openComment: 0,//打开评论
                    articleTags: [],
                },
                articleTagAliaName: [],
                randomBannerItem: {},
                RelvantArticle: [],
                detailhtml: '',
                showMore: true,
                loading: true,
                offset: 300,
                offset_opacity: 1200,
                scroll_top_duration: 700,
                scrollTop: 0,
                defaultfollowUsPosition: 0,
                followUsPosition: 0
            },
            mounted() {
                var _this = this;
                _this.$nextTick(function () {
                    /* _this.defaultfollowUsPosition=_this.$refs.followUs.offsetTop;
                   // 注册scroll事件并监听
                   window.addEventListener('scroll', ()=> {
                     var scrollTop = document.documentElement.scrollTop;
                     _this.scrollTop=scrollTop;
                      var followUsPosition = _this.$refs.followUs.offsetTop;
                      _this.followUsPosition=followUsPosition;
                      if(scrollTop<=_this.defaultfollowUsPosition ){
                           _this.followUsPosition=_this.defaultfollowUsPosition;
                       }
                   })  */
                    editormd.markdownToHTML("divcontent", {
                        htmlDecode: "style,script,iframe", //可以过滤标签解码
                        emoji: true,
                        taskList: true,
                        tex: true,               // 默认不解析
                        flowChart: true,         // 默认不解析
                        sequenceDiagram: false,  // 默认不解析
                    });
                })
            },
            created() {
                this.initArticleModel();
                this.getRelvantArticle();
                this.getRandomBanner();
            },
            methods: {
                getRandomBanner() {
                    var _this = this;
                    $.ajax({
                        type: "POST",
                        url: "/getBannerlist",
                        data: {},
                        success: function (result) {
                            if (result.code == 0) {
                                var resultCount = result.data.rows.length;
                                if (resultCount > 0) {
                                    var random = parseInt(Math.random() * resultCount, 10);
                                    _this.randomBannerItem = result.data.rows[random];
                                }
                            }
                        }
                    });
                },
                getRelvantArticle() {
                    var _this = this;
                    var param = {articleId: this.articleItem.id, tagIds: this.articleItem.articleTags.join(",")};
                    $.ajax({
                        type: "POST",
                        url: "/getRelvantArticle",
                        data: param,
                        success: function (result) {
                            if (result.code == 0) {
                                _this.RelvantArticle = result.data;
                            }
                        }
                    });

                },
                initArticleModel() {
                    var articleModel = [[${articleModel}]];
                    var articleTagAliaName = [[${tagList}]];
                    if (articleModel != null) {
                        this.articleItem.status = articleModel.status;
                        this.articleItem.title = articleModel.title;
                        this.articleItem.author = articleModel.author;
                        this.articleItem.content = articleModel.content;
                        this.articleItem.abstractContent = articleModel.abstractContent;
                        this.articleItem.coverImageList = articleModel.coverImageList;
                        this.articleItem.publishTime = articleModel.publishTime;
                        this.articleItem.id = articleModel.id;
                        this.articleItem.showStyle = articleModel.showStyle;
                        this.articleItem.categoryId = articleModel.categoryId;
                        this.articleItem.categoryName = articleModel.category.categoryName;
                        this.articleItem.openComment = articleModel.openComment;
                        this.articleItem.articleTags = articleModel.articleTags;
                        var tagLists = articleModel.articleTags.split(',');
                        this.articleItem.articleTags = tagLists;
                        this.articleTagAliaName = articleTagAliaName;
                    }

                },
                backToTop() {
                    document.body.scrollTop = 0;
                    document.documentElement.scrollTop = 0;
                }
            }
        })
    </script>
</div>
</body>
</html>